<svg viewBox='0 0 800 320' class='fm-chart'>
  <style type='text/css'>
  <![CDATA[
  .fm-chart text, .fm-tooltip {
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font: 10px sans-serif;
  }

  .fm-chart .axis .stroke {
    stroke: #aaa;
    stroke-width: 1px;
  }

  .fm-chart .axis .tick {
    stroke: #aaa;
    stroke-width: 1px;
  }

  .fm-chart .axis .label, .axis .title {
    fill: #666;
  }

  .fm-chart .axis .label {
    font-size: 10px;
  }

  .fm-chart .axis .title {
    font-size: 10px;
  }

  .fm-chart .chart-title {
    font-size: 12px;
    font-weight: bold;
  }

  .fm-chart .chart-subtitle {
    font-size: 10px;
  }

  .fm-chart text.label {
    fill: #666;
  }

  .fm-chart .legend text {
    font-size: 10px;
    fill: #333;
  }

  .fm-chart .legend text.title {
    fill: #666;
  }

  .fm-chart .line {
    fill: none;
    stroke: #000;
  }

  .fm-chart .area {
    opacity: 0.8;
  }

  .fm-chart .grid .gridline {
    stroke: #ddd;
    stroke-width: 0.02em;
  }

  .fm-chart .bar,
  .fm-chart .point,
  .fm-chart .area {
    fill: #000;
  }

  .fm-chart .bar.color6,
  .fm-chart .point.color6,
  .fm-chart .area.color6 {
    fill: #db843d;
  }

  .fm-chart .lines .line.color6 {
    strok: #db843d;
  }

  .fm-chart .bar.color5,
  .fm-chart .point.color5,
  .fm-chart .area.color5 {
    fill: #3d96ae;
  }

  .fm-chart .lines .line.color5 {
    stroke: #3d96ae;
  }

  .fm-chart .bar.color4,
  .fm-chart .point.color4,
  .fm-chart .area.color4 {
    fill: #80699b;
  }

  .fm-chart .line.color4 {
    stroke: #80699b;
  }

  .fm-chart .bar.color3,
  .fm-chart .point.color3,
  .fm-chart .area.color3 {
    fill: #89a54e;
  }

  .fm-chart .line.color3 {
    stroke: #89a54e;
  }

  .fm-chart .bar.color2,
  .fm-chart .point.color2,
  .fm-chart .area.color2 {
    fill: #aa4643;
  }

  .fm-chart .line.color2 {
    stroke: #aa4643;
  }

  .fm-chart .bar.color1,
  .fm-chart .point.color1,
  .fm-chart .area.color1 {
    fill: #4572a7;
  }

  .fm-chart .line.color1 {
    stroke: #4572a7;
  }

  .fm-chart.bar.vertical .axis.left .stroke,
  .fm-chart.bar.vertical .axis.left .tick,
  .fm-chart.bar.vertical .axis.right .stroke,
  .fm-chart.bar.vertical .axis.right .tick {
    display: none;
  }

  .fm-tooltip {
    text-align: center;
    padding: 5px 7px;
    color: #fff;
    background: #333;
    border-radius: 3px;
    font-size: 13px;
  }
  ]]>
  </style>
  <g class='axis bottom'>
    <text x='50.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >-60.0</text>
    <text x='150.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >-42.9</text>
    <text x='250.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >-25.7</text>
    <text x='350.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >-8.57</text>
    <text x='450.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >8.57</text>
    <text x='550.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >25.7</text>
    <text x='650.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >42.9</text>
    <text x='750.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >60.0</text>
    <line x1='50.000000' y1='25.000000' x2='50.000000' y2='30.000000' class='tick' />
    <line x1='150.000000' y1='25.000000' x2='150.000000' y2='30.000000' class='tick' />
    <line x1='250.000000' y1='25.000000' x2='250.000000' y2='30.000000' class='tick' />
    <line x1='350.000000' y1='25.000000' x2='350.000000' y2='30.000000' class='tick' />
    <line x1='450.000000' y1='25.000000' x2='450.000000' y2='30.000000' class='tick' />
    <line x1='550.000000' y1='25.000000' x2='550.000000' y2='30.000000' class='tick' />
    <line x1='650.000000' y1='25.000000' x2='650.000000' y2='30.000000' class='tick' />
    <line x1='750.000000' y1='25.000000' x2='750.000000' y2='30.000000' class='tick' />
    <line x1='50.000000' y1='25.000000' x2='750.000000' y2='25.000000' class='stroke' />
  </g>
  <g class='axis right'>
    <text x='760.000000' y='295.000000' style='text-anchor:start; dominant-baseline:middle;' class='label' >-40.0</text>
    <text x='760.000000' y='256.428571' style='text-anchor:start; dominant-baseline:middle;' class='label' >-25.7</text>
    <text x='760.000000' y='217.857143' style='text-anchor:start; dominant-baseline:middle;' class='label' >-11.4</text>
    <text x='760.000000' y='179.285714' style='text-anchor:start; dominant-baseline:middle;' class='label' >2.86</text>
    <text x='760.000000' y='140.714286' style='text-anchor:start; dominant-baseline:middle;' class='label' >17.1</text>
    <text x='760.000000' y='102.142857' style='text-anchor:start; dominant-baseline:middle;' class='label' >31.4</text>
    <text x='760.000000' y='63.571429' style='text-anchor:start; dominant-baseline:middle;' class='label' >45.7</text>
    <text x='760.000000' y='25.000000' style='text-anchor:start; dominant-baseline:middle;' class='label' >60.0</text>
    <line x1='750.000000' y1='295.000000' x2='745.000000' y2='295.000000' class='tick' />
    <line x1='750.000000' y1='256.428571' x2='745.000000' y2='256.428571' class='tick' />
    <line x1='750.000000' y1='217.857143' x2='745.000000' y2='217.857143' class='tick' />
    <line x1='750.000000' y1='179.285714' x2='745.000000' y2='179.285714' class='tick' />
    <line x1='750.000000' y1='140.714286' x2='745.000000' y2='140.714286' class='tick' />
    <line x1='750.000000' y1='102.142857' x2='745.000000' y2='102.142857' class='tick' />
    <line x1='750.000000' y1='63.571429' x2='745.000000' y2='63.571429' class='tick' />
    <line x1='750.000000' y1='25.000000' x2='745.000000' y2='25.000000' class='tick' />
    <line x1='750.000000' y1='25.000000' x2='750.000000' y2='295.000000' class='stroke' />
  </g>
  <g class='axis bottom'>
    <text x='50.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >-60.0</text>
    <text x='150.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >-42.9</text>
    <text x='250.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >-25.7</text>
    <text x='350.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >-8.57</text>
    <text x='450.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >8.57</text>
    <text x='550.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >25.7</text>
    <text x='650.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >42.9</text>
    <text x='750.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >60.0</text>
    <line x1='50.000000' y1='295.000000' x2='50.000000' y2='290.000000' class='tick' />
    <line x1='150.000000' y1='295.000000' x2='150.000000' y2='290.000000' class='tick' />
    <line x1='250.000000' y1='295.000000' x2='250.000000' y2='290.000000' class='tick' />
    <line x1='350.000000' y1='295.000000' x2='350.000000' y2='290.000000' class='tick' />
    <line x1='450.000000' y1='295.000000' x2='450.000000' y2='290.000000' class='tick' />
    <line x1='550.000000' y1='295.000000' x2='550.000000' y2='290.000000' class='tick' />
    <line x1='650.000000' y1='295.000000' x2='650.000000' y2='290.000000' class='tick' />
    <line x1='750.000000' y1='295.000000' x2='750.000000' y2='290.000000' class='tick' />
    <line x1='50.000000' y1='295.000000' x2='750.000000' y2='295.000000' class='stroke' />
  </g>
  <g class='axis left'>
    <text x='40.000000' y='295.000000' style='text-anchor:end; dominant-baseline:middle;' class='label' >-40.0</text>
    <text x='40.000000' y='256.428571' style='text-anchor:end; dominant-baseline:middle;' class='label' >-25.7</text>
    <text x='40.000000' y='217.857143' style='text-anchor:end; dominant-baseline:middle;' class='label' >-11.4</text>
    <text x='40.000000' y='179.285714' style='text-anchor:end; dominant-baseline:middle;' class='label' >2.86</text>
    <text x='40.000000' y='140.714286' style='text-anchor:end; dominant-baseline:middle;' class='label' >17.1</text>
    <text x='40.000000' y='102.142857' style='text-anchor:end; dominant-baseline:middle;' class='label' >31.4</text>
    <text x='40.000000' y='63.571429' style='text-anchor:end; dominant-baseline:middle;' class='label' >45.7</text>
    <text x='40.000000' y='25.000000' style='text-anchor:end; dominant-baseline:middle;' class='label' >60.0</text>
    <line x1='50.000000' y1='295.000000' x2='55.000000' y2='295.000000' class='tick' />
    <line x1='50.000000' y1='256.428571' x2='55.000000' y2='256.428571' class='tick' />
    <line x1='50.000000' y1='217.857143' x2='55.000000' y2='217.857143' class='tick' />
    <line x1='50.000000' y1='179.285714' x2='55.000000' y2='179.285714' class='tick' />
    <line x1='50.000000' y1='140.714286' x2='55.000000' y2='140.714286' class='tick' />
    <line x1='50.000000' y1='102.142857' x2='55.000000' y2='102.142857' class='tick' />
    <line x1='50.000000' y1='63.571429' x2='55.000000' y2='63.571429' class='tick' />
    <line x1='50.000000' y1='25.000000' x2='55.000000' y2='25.000000' class='tick' />
    <line x1='50.000000' y1='25.000000' x2='50.000000' y2='295.000000' class='stroke' />
  </g>
  <g class='points'>
    <text x='458.333333' y='82.200000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >5</text>
    <circle cx='458.333333' cy='95.200000' r='5.000000' class='point color1' fm:label='5' fm:series='series1', style=''></circle>
    <text x='487.500000' y='204.600000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >23</text>
    <circle cx='487.500000' cy='235.600000' r='23.000000' class='point color1' fm:label='23' fm:series='series1', style=''></circle>
    <text x='516.666667' y='51.900000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >11</text>
    <circle cx='516.666667' cy='70.900000' r='11.000000' class='point color1' fm:label='11' fm:series='series1', style=''></circle>
    <text x='575.000000' y='221.300000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >9</text>
    <circle cx='575.000000' cy='238.300000' r='9.000000' class='point color1' fm:label='9' fm:series='series1', style=''></circle>
    <text x='633.333333' y='97.500000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >14</text>
    <circle cx='633.333333' cy='119.500000' r='14.000000' class='point color1' fm:label='14' fm:series='series1', style=''></circle>
    <text x='691.666667' y='81.900000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >8</text>
    <circle cx='691.666667' cy='97.900000' r='8.000000' class='point color1' fm:label='8' fm:series='series1', style=''></circle>
    <text x='341.666667' y='82.200000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >5</text>
    <circle cx='341.666667' cy='95.200000' r='5.000000' class='point color2' fm:label='5' fm:series='series2', style=''></circle>
    <text x='312.500000' y='122.400000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >8</text>
    <circle cx='312.500000' cy='138.400000' r='8.000000' class='point color2' fm:label='8' fm:series='series2', style=''></circle>
    <text x='283.333333' y='166.800000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >23</text>
    <circle cx='283.333333' cy='197.800000' r='23.000000' class='point color2' fm:label='23' fm:series='series2', style=''></circle>
    <text x='225.000000' y='125.700000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >2</text>
    <circle cx='225.000000' cy='135.700000' r='2.000000' class='point color2' fm:label='2' fm:series='series2', style=''></circle>
    <text x='166.666667' y='242.500000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >4</text>
    <circle cx='166.666667' cy='254.500000' r='4.000000' class='point color2' fm:label='4' fm:series='series2', style=''></circle>
    <text x='108.333333' y='224.100000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >17</text>
    <circle cx='108.333333' cy='249.100000' r='17.000000' class='point color2' fm:label='17' fm:series='series2', style=''></circle>
  </g>
</svg>
